<template>
    <div class="unit-index yuan-container">
        <a-card title="单位管理">
            <div class="filter-panel" style="overflow-hidden">
                <div class="filter-list" style="float: right;">
                    <a-button type="primary" @click="add" v-if="$utilCheckPermission(['unitManagementSave'])">新增</a-button>
                </div>
            </div>
            <a-spin tip="Loading..." :spinning="loading">
                <a-form-model layout="inline" class="yuan-form" :label-col="{ style: { width: '100px' } }"
                    :wrapper-col="{ style: { width: 'calc(100% - 120px)' } }">
                    <div class="form-panel">
                        <div class="form-panel-box yuan-form-col5">
                            <template v-for="(item,index) in pageList">
                                <a-form-model-item class="yuan-form-item "
                                    :class="$utilCheckPermission(['unitManagementSave']) && 'yuan-form-row-item'" label="单位"
                                    :key="item.id">
                                    <a-input class="yuan-form-input" v-model="item.unit" placeholder="请输入" disabled></a-input>
                                    <a-popconfirm ok-text="确认" cancel-text="取消" @confirm="clickDelete(item.id)"
                                        title="您确定要删除该单位吗？" v-if="$utilCheckPermission(['unitManagementSave'])">
                                        <a-button class="primary-empty-btn yuan-form-item-btn">删除</a-button>
                                    </a-popconfirm>

                                </a-form-model-item>

                                <div class="clear-both"></div>
                            </template>
                        </div>
                    </div>
                </a-form-model>
                <!-- <div class="botton-box">
                    <a-button type="primary" @click="add">保存</a-button>
                </div> -->
            </a-spin>
        </a-card>
        <a-modal width="600px" :visible="visible" :title="modalOption.title" @ok="modalOption.onOk" @cancel="modalOption.onCancel"
            :okText="modalOption.okText" :cancelText="modalOption.cancelText" class="yuan-modal unit-add-modal">
            <a-spin tip="Loading..." :spinning="formLoading">
                <a-form-model layout="inline" class="yuan-form" ref="form" :model="formData" :rules="rules"
                    :label-col="{ style: { width: '100px' } }" :wrapper-col="{ style: { width: 'calc(100% - 120px)' } }">
                    <div class="form-panel">
                        <div class="form-panel-box yuan-form-col3">
                            <a-form-model-item class="yuan-form-item" label="单位名称" prop="unit">
                                <a-input class="yuan-form-input" v-model="formData.unit" placeholder="请输入"></a-input>
                            </a-form-model-item>
                        </div>
                    </div>
                </a-form-model>
            </a-spin>
        </a-modal>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { h } from "vue";
import nextApi from "@/api/nextApi";
@Component({
    name: "unitIndex",
    components: {},
})
export default class extends Vue {
    previewVisible = false;
    keywords = "";
    loading = false;
    pagination = {
        pageSize: 10,
        current: 1,
        total: 0,
        showTotal: (total: number) => `共${total}条`,
        onChange: this.pageChange,
    };
    pageList: { id: string; unit: string }[] = [];
    columns = [
        {
            title: "序号",
            dataIndex: "index",
            key: "index",
            align: "center",
            customRender: (text: string, record: any, index: number) => `${index + 1}`,
        },
        {
            align: "center",
            dataIndex: "unit",
            key: "unit",
            title: "单位名称",
        },
        // {
        //     align: "center",
        //     dataIndex: "action",
        //     key: "action",
        //     title: "操作",
        //     width: 260,
        //     customRender: (text: string, record: ProListRes, index: number) => {
        //         return h("div", [
        //             h(
        //                 "a-button",
        //                 {
        //                     style: { marginRight: "5px" },
        //                     props: {
        //                         icon: "edit",
        //                         type: "primary",
        //                         size: "small",
        //                     },
        //                     on: { click: () => this.editDetail(record) },
        //                 },
        //                 "编辑"
        //             ),
        //         ]);
        //     },
        // },
    ];
    formLoading = false;
    modalOption = {
        title: "新增单位",
        okText: "保存",
        cancelText: "取消",
        onOk: () => {
            this.modalOk();
        },
        onCancel: () => {
            this.closeModal();
        },
    };
    formData: any = {};
    rules = {
        unit: [{ required: true, message: "请输入单位名称", trigger: "blur" }],
    };
    getRowKey(item: any) {
        return item.id;
    }

    async getList() {
        this.pageList = [];
        try {
            this.loading = true;
            const res = await nextApi.getUnitList();
            this.pageList = res.data;
        } finally {
            this.loading = false;
        }
    }
    resetList() {
        this.pagination.current = 1;
        this.getList();
    }

    visible = false;
    infoId = "";
    editDetail(item: { id: string; unit: string }) {
        this.infoId = item.id;
        this.visible = true;
    }
    add() {
        this.infoId = "";
        this.visible = true;
    }
    pageChange(page: number, pageSize: number) {
        this.pagination.pageSize = pageSize;
        this.pagination.current = page;
        this.getList();
    }
    async mounted() {
        this.getList();
    }
    modalOk() {
        (this.$refs.form as any).validate(async (valid: any) => {
            if (valid) {
                this.formLoading = true;
                try {
                    const res = await nextApi.addUnit([this.formData.unit]);
                    this.$message.success(res.msg);
                    this.formData = {};
                    (this.$refs.form as any).resetFields();
                    this.resetList();
                    this.visible = false;
                } finally {
                    this.formLoading = false;
                }
            }
        });
    }
    closeModal() {
        this.visible = false;
    }
    async clickDelete(id: string) {
        this.loading = true;
        try {
            const res = await nextApi.deleteUnit({ id });
            this.$message.success(res.msg);
            this.resetList();
        } finally {
            this.loading = false;
        }
    }
}
</script>
<style lang="scss">
.unit-index {
    padding: 20px;
    .botton-box {
        text-align: center;
    }
}
</style>
